import { c as create_ssr_component, a as subscribe, e as escape, f as add_attribute, v as validate_component, b as each, n as null_to_empty } from "../../../chunks/index2.js";
import { g as getNotificationsContext, k as knowledge1 } from "../../../chunks/Scrollbar.svelte_svelte_type_style_lang.js";
import { P as PaperAirplane, C as ChatMessage } from "../../../chunks/ChatMessage.js";
const _page_svelte_svelte_type_style_lang = "";
const css = {
  code: ".transition-transform.svelte-ij9m5e{transition:transform 0.3s ease-in-out}.user-message.svelte-ij9m5e{background-color:#e0f7fa;padding:10px;border-radius:12px;max-width:70%;margin-left:auto;margin-right:10px}.assistant-message.svelte-ij9m5e{background-color:#f0f0f0;padding:10px;border-radius:12px;max-width:70%;margin-right:auto;margin-left:10px}.assistant-content.svelte-ij9m5e{display:inline-block;white-space:nowrap;overflow:hidden;border-right:2px solid black;animation:svelte-ij9m5e-typing 2s steps(20) 1s forwards}@keyframes svelte-ij9m5e-typing{from{width:0}to{width:100%}}.typing-indicator.svelte-ij9m5e{display:inline-block;width:10px;height:10px;border-radius:50%;background-color:gray;animation:svelte-ij9m5e-blink 1s infinite}@keyframes svelte-ij9m5e-blink{50%{background-color:transparent}}",
  map: null
};
const Page = create_ssr_component(($$result, $$props, $$bindings, slots) => {
  let $knowledge1, $$unsubscribe_knowledge1;
  $$unsubscribe_knowledge1 = subscribe(knowledge1, (value) => $knowledge1 = value);
  globalThis && globalThis.__awaiter || function(thisArg, _arguments, P, generator) {
    function adopt(value) {
      return value instanceof P ? value : new P(function(resolve) {
        resolve(value);
      });
    }
    return new (P || (P = Promise))(function(resolve, reject) {
      function fulfilled(value) {
        try {
          step(generator.next(value));
        } catch (e) {
          reject(e);
        }
      }
      function rejected(value) {
        try {
          step(generator["throw"](value));
        } catch (e) {
          reject(e);
        }
      }
      function step(result) {
        result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
      }
      step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
  };
  let { data } = $$props;
  let query = "";
  let chatMessages = data.chatMsg ? data.chatMsg : [];
  getNotificationsContext();
  if ($$props.data === void 0 && $$bindings.data && data !== void 0)
    $$bindings.data(data);
  $$result.css.add(css);
  ($knowledge1 === null || $knowledge1 === void 0 ? void 0 : $knowledge1.id) ? $knowledge1.id : "default";
  $$unsubscribe_knowledge1();
  return `
<div class="flex h-full">
	<div class="${escape(
    null_to_empty(`fixed inset-0 z-50 bg-gray-900 bg-opacity-50 transition-all duration-300 ${"pointer-events-none opacity-0"}`),
    true
  ) + " svelte-ij9m5e"}"></div>

	<div class="${escape(null_to_empty(`fixed left-0 top-0 h-full w-64 bg-gray-800 text-white transition-transform duration-300 ${"-translate-x-full"}`), true) + " svelte-ij9m5e"}"><div class="p-4"><h2 class="mb-6 text-2xl font-bold">Sidebar</h2>
			<ul class="space-y-4"><li><button class="z-60 w-full rounded-lg bg-gray-700 px-4 py-2 text-left text-lg font-semibold transition-all duration-200 ease-in-out hover:bg-gray-600 focus:bg-gray-600 active:bg-gray-500">Go to Mermaid
					</button></li>
				<li><button class="w-full rounded-lg bg-gray-700 px-4 py-2 text-left text-lg font-semibold transition-all duration-200 ease-in-out hover:bg-gray-600 focus:bg-gray-600 active:bg-gray-500">Go to Drawer
					</button></li>

				</ul></div></div>

	
	<div class="flex flex-1 flex-col p-4"><div class="fixed right-0 top-0 z-10 p-4">
			<button class="rounded bg-blue-500 p-2 text-white">${escape("Open Sidebar")}</button></div>

		
		<div class="flex-1 overflow-auto rounded-lg bg-white p-4"><div class="flex flex-col gap-4"><div class="flex justify-between p-2"><p class="text-[1.7rem] font-bold tracking-tight">ChatQnA</p>
					<button>View Mermaid Diagram</button></div>
        
				<div class="mt-4 flex gap-2"><input type="text" class="flex-1 rounded border p-2" placeholder="Type your message..."${add_attribute("value", query, 0)}>
					<button class="rounded bg-blue-500 p-2 text-white" type="submit" id="send">${validate_component(PaperAirplane, "PaperAirplane").$$render($$result, {}, {}, {})}</button></div>

				
				<div class="flex flex-col gap-2 overflow-auto">${each(chatMessages, (message, i) => {
    return `${validate_component(ChatMessage, "ChatMessage").$$render(
      $$result,
      {
        msg: message,
        time: i === 0 || message.time > 0 && message.time < 100 ? message.time : ""
      },
      {},
      {}
    )}`;
  })}
          <p>${escape(chatMessages.length)} messages in total</p></div>


				
				${``}</div></div></div>
</div>`;
});
export {
  Page as default
};
